<template>
  <avue-crud ref="crud"
             :key="reload"
             :option="option"
             :data="data">
    <template #menu-left="{size}">
      <el-button @click="saveOption"
                 type="danger"
                 :size="size">保存配置</el-button>
    </template>
  </avue-crud>
</template>
<script>
const key = 'avue-option'
export default {
  data () {
    return {
      reload: Math.random(),
      data: [{
        text1: '内容1-1',
        text2: '内容2-1',
        text3: '110000'
      }, {
        text1: '内容1-2',
        text2: '内容2-2',
        text3: '120000'
      }, {
        text1: '内容1-3',
        text2: '内容2-3'
      }, {
        text1: '内容1-4',
        text2: '内容2-4'
      }, {
        text1: '内容1-5',
        text2: '内容2-5'
      }],
      option: {
        sortable: true,
        addBtn: false,
        menu: false,
        border: true,
        align: 'center',
        column: [{
          label: '列内容1',
          prop: 'text1'
        }, {
          label: '列内容2',
          prop: 'text2'
        }, {
          label: '列内容3',
          prop: 'text3',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
        }]
      }
    }
  },
  mounted () {
    let option = localStorage.getItem(key)
    if (option) {
      this.option = JSON.parse(option)
      this.reload = Math.random()
    }
  },
  methods: {
    saveOption () {
      localStorage.setItem(key, JSON.stringify(this.option))
      this.$message.success('配置保存成功')
    }
  }
}
</script>